import { DownOutlined } from '@ant-design/icons';
import { Dropdown, Menu, Space, Typography } from 'antd';
import React, { useState } from 'react';


const Drop = () => {
  const [menuName,setMenuName] = useState('乐山')
  const selectHandler = (e) => {
    console.log(e.key);
    switch (e.key) {
      case '1':
        setMenuName('黄龙')
        break;
      case '2':
        setMenuName('九寨沟')
        break;
      case '3':
        setMenuName('峨眉山')
        break;
      case '4':
        setMenuName('乐山')
        break;
      default:
        break;
    }
  }
  const menu = (
    <Menu
      selectable
      defaultSelectedKeys={['3']}
      onSelect={e=>selectHandler(e)}
      items={[
        {
          key: '1',
          label: '黄龙',
        },
        {
          key: '2',
          label: '九寨沟',
        },
        {
          key: '3',
          label: '峨眉山',
        },
        {
          key: '4',
          label: '乐山',
        },
      ]}
    />
  );
  return (
  <Dropdown overlay={menu} >
    <Typography.Link>
      <Space>
        {menuName}
        <DownOutlined />
      </Space>
    </Typography.Link>
  </Dropdown>
)};

export default Drop;